<template>
	<view class="index">

		<!-- Tabbar页面 -->
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentTabbarIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<page-a ref="pageA"></page-a>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentTabbarIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<page-b ref="pageB"></page-b>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentTabbarIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<page-c ref="pageC"></page-c>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[3]" :style="{display: currentTabbarIndex === 3 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<page-d ref="pageD"></page-d>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[4]" :style="{display: currentTabbarIndex === 4 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<page-e ref="pageE"></page-e>
			</scroll-view>
		</view>

		<!-- 记得换一下自己的Appid -->

		<!-- 自由创造区，以下为示例，可自行改造 -->
		<myTabbar :currentTab="currentTabbarIndex" @changeTabbar="changeTabbar"></myTabbar>

	</view>
</template>

<script>
	import PageA from './component/PageA.vue'
	import PageB from './component/PageB.vue'
	import PageC from './component/PageC.vue'
	import PageD from './component/PageD.vue'
	import PageE from './component/PageE.vue'
	import myTabbar from './component/myTabbar.vue'

	export default {
		components: {
			PageA,
			PageB,
			PageC,
			PageD,
			PageE,
			myTabbar
		},
		data() {
			return {
				currentTabbarIndex: 0,  
				tabberPageLoadFlag: []
			}
		},
		onLoad(options) {
			const index = Number(options.index || 0) 
			for (let i = 0; i < 5; i++) {
				this.tabberPageLoadFlag.push(i === index)
			}
			this.changeTabbar(index)
		},
		onReady() {

		},
		methods: {
			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {
			  
			},

			// 修改当前选中的tabbar
			changeTabbar(index) { 
				if (this.currentTabbarIndex === index) return
				this._switchTabbarPage(index)
				this.currentTabbarIndex = index
			},

			// 切换导航页面
			_switchTabbarPage(index) { 
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%; 
		position: relative; 
		.custom-tabbar-page {
			width: 100%;
			height: calc(100vh - 110rpx);
			box-sizing: border-box;
			padding-bottom: 0rpx;
			padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
		}
	}
</style>